<template>
	<view class="buySucceed">
		<view>
			<view class="image">
				<image src="../../static/iamges/baoxianxiangqing/caichanxian@2x.png" mode=""></image>
				<view>我的余额</view>
			</view>
			<view class="remaining">{{moneny}}</view>
			<view class="loans">去借钱，新人免息 ></view>
		</view>
		<button class="bt1" @click="go">
			<text v-if="show==false">充值</text>
			<!-- 加载动画 -->
			<u-loading :show="show" size="50" mode="flower" v-else></u-loading>
		</button>
		<button class="bt2" @click="gotoIndex">回到首页</button>
		<!-- 未设置支付密码 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('user');
	export default {
		created() {
			this.getmoney()
		},
		destroyed() {
			uni.hideLoading()
		},
		data() {
			return {
				show: false,
				moneny: '', //余额
			};
		},
		methods: {
			...mapActions(['getUserPayPad', 'userWalletBalance']),

			async go() {
				uni.showLoading({
					title: '加载中'
				});
				this.show = true
				const data = await this.getUserPayPad()
				//console.log("data",data)
				if (data.code == 10001) {
					this.show = false
					uni.hideLoading()
					uni.navigateTo({
						url: "/pages/investmoney/investmoney"
					})
				} else {
					//未设置支付密码 跳转到新增支付密码去
					this.$refs.uToast.show({
						title: '未设置支付密码，即将跳转到至设置支付密码',
						type: 'warning',
						position: "top",
						url: '/pages/newPassword/newPassword'
					})

				}
			},
			//查询余额
			async getmoney() {
				const data = await this.userWalletBalance()
				console.log("data", data)
				this.moneny = data.data
			},
			// 货到首页
			gotoIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//下拉刷新
			onPullDownRefresh() {
				console.log('refresh');
				uni.hideLoading()
				this.getmoney()
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 1000);
			}
		},
	};
</script>


<style lang="scss" scoped>
	.buySucceed {
		>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 80rpx 0;

			.remaining {
				font-size: 60rpx;
				font-weight: bold;
			}

			.loans {
				color: red;
				font-size: 24rpx;
				padding: 20rpx;
			}

			.image {
				height: 220rpx;

				view {
					padding: 20rpx 0;
				}

				image {
					padding-left: 16rpx;
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		button {
			margin: 20rpx;
			border-radius: 16rpx;
			border: 1px solid rgba(255, 255, 255, 0);
		}

		.bt1 {
			color: #ffffff;
			background-color: red;
		}

		.bt2 {
			background-color: #fafafa;
		}
	}
</style>
